<template>
  <div class="mixin-components-container">
    <el-row :gutter="20" style="margin-top:50px;">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>聚焦左</span>
          </div>
          <!-- 封面 -->
          <mallki class-name="mallki-text" text="点击图片设置为聚焦图" />
          <el-carousel :interval="4000" type="card" height="100px" width="250px">
            <el-carousel-item v-for="item in focuses.imgs" :key="item">
              <el-image :src="item" class="image" @click="changeImg(0, item)" />
            </el-carousel-item>
          </el-carousel>
          <mallki class-name="mallki-text" text="手动设置" />
          <div style="margin-top: 15px;">
            <el-input v-model="focuses.focus[0].img" placeholder="请输入图片地址">
            </el-input>
          </div>
          <!-- 关联文章 -->
          <!-- 标题 -->
          <el-form ref="form" :model="focuses.focus[0]" label-width="80px" style="margin-top: 15px;">
            <el-form-item label="关联文章">
              <el-col :span="8">
                <el-input v-model="focuses.focus[0].id" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="标题">
              <el-col :span="20">
                <el-input v-model="focuses.focus[0].title" maxlength="20" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="12">
                <el-tooltip class="item" effect="dark" content="三个按钮是并联的~" placement="bottom">
                <el-button type="primary" @click="updateFocus">立即更新</el-button>
                </el-tooltip>
              </el-col>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>聚焦中</span>
          </div>
          <!-- 封面 -->
          <mallki class-name="mallki-text" text="点击图片设置为聚焦图" />
          <el-carousel :interval="4000" type="card" height="100px" width="250px">
            <el-carousel-item v-for="item in focuses.imgs" :key="item">
              <el-image :src="item" class="image" @click="changeImg(1, item)" />
            </el-carousel-item>
          </el-carousel>
          <mallki class-name="mallki-text" text="手动设置" />
          <div style="margin-top: 15px;">
            <el-input v-model="focuses.focus[1].img" placeholder="请输入图片地址">
            </el-input>
          </div>
          <!-- 关联文章 -->
          <!-- 标题 -->
          <el-form ref="form" :model="focuses.focus[1]" label-width="80px" style="margin-top: 15px;">
            <el-form-item label="关联文章">
              <el-col :span="8">
                <el-input v-model="focuses.focus[1].id" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="标题">
              <el-col :span="20">
                <el-input v-model="focuses.focus[1].title" maxlength="20" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="12">
                <el-tooltip class="item" effect="dark" content="三个按钮是并联的~" placement="bottom">
                <el-button type="primary" @click="updateFocus">立即更新</el-button>
                </el-tooltip>
              </el-col>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>聚焦右</span>
          </div>
          <!-- 封面 -->
          <mallki class-name="mallki-text" text="点击图片设置为聚焦图" />
          <el-carousel :interval="4000" type="card" height="100px" width="250px">
            <el-carousel-item v-for="item in focuses.imgs" :key="item">
              <el-image :src="item" class="image" @click="changeImg(2, item)" />
            </el-carousel-item>
          </el-carousel>
          <mallki class-name="mallki-text" text="手动设置" />
          <div style="margin-top: 15px;">
            <el-input v-model="focuses.focus[2].img" placeholder="请输入图片地址">
            </el-input>
          </div>
          <!-- 关联文章 -->
          <!-- 标题 -->
          <el-form ref="form" :model="focuses.focus[2]" label-width="80px" style="margin-top: 15px;">
            <el-form-item label="关联文章">
              <el-col :span="8">
                <el-input v-model="focuses.focus[2].id" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item label="标题">
              <el-col :span="20">
                <el-input v-model="focuses.focus[2].title" maxlength="20" show-word-limit />
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="12">
                <el-tooltip class="item" effect="dark" content="三个按钮是并联的~" placement="bottom">
                <el-button type="primary" @click="updateFocus">立即更新</el-button>
                </el-tooltip>
              </el-col>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top:50px;">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>关于 [HTML]</span>
          </div>
          <el-popover ref="resources" placement="right" title="[预览] 资源" width="200" trigger="focus">
            <div v-html="focuses.resources">{{focuses.resources}}</div>
          </el-popover>
          <el-input type="textarea" :rows="10" placeholder="嵌入HTML语言作为主站资源部分" v-model="focuses.resources"
            v-popover:resources>
          </el-input>
          <el-button style="margin-top: 15px;" type="primary" @click="onSubmit({key:'resources',value:focuses.resources})">立即更新</el-button>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>资源 [HTML]</span>
          </div>
          <el-popover ref="about" placement="left" title="[预览] 关于博客" width="500" trigger="focus">
            <div v-html="focuses.about">{{focuses.about}}</div>
          </el-popover>
          <el-input type="textarea" :rows="10" placeholder="嵌入HTML语言作为主站关于部分" v-model="focuses.about" v-popover:about>
          </el-input>
          <el-button style="margin-top: 15px;" type="primary" @click="onSubmit({key:'about',value:focuses.about})">立即更新</el-button>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top:50px;">
      <el-col :span="21">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>友情连接</span>
          </div>
          <div class="components-container board">
            <Kanban :key="1" :list="focuses.friends" :group="group" class="kanban todo" header-text="发布" />
            <Kanban :key="2" :list="focuses.classmates" :group="group" class="kanban working" header-text="审核" />
            <Kanban :key="3" :list="focuses.deletes" :group="group" class="kanban done" header-text="删除" />
          </div>
          <el-tooltip class="item" effect="dark" content="提交之后删除列表的友情连接就没有啦!" placement="top-start">
            <el-button style="margin-top: 15px;" type="primary" @click="onChange()">立即更新</el-button>
          </el-tooltip>
        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>审核中</span>
          </div>
          <div class="left" v-for="(item,i) in focuses.classmates" style="margin-top: 10px;">
            <el-tooltip class="item" effect="dark" placement="left">
              <div slot="content">{{item.path}}<br/>{{item.desc}}</div>
              <mallki :href="item.path" class-name="mallki-text" :text="item.name" />
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>

</template>

<script>
  import Mallki from '@/components/TextHoverEffect/Mallki'
  import Kanban from '@/components/Kanban'
  import {
    htmlDecode,
    htmlEncode
  } from '../../utils/index.js'
  import {
    updateFocus,
    updateConf,
    getPersonalInfo
  } from '../../api/site.js'

  export default {
    name: 'Personal',
    components: {
      Mallki,
      Kanban
    },
    data() {
      return {
        group: '0',
        focuses: {
          focus: [{
            id: 0,
            title: '测试',
            img: ''
          }, {
            id: 0,
            title: '测试',
            img: ''
          }, {
            id: 0,
            title: '测试',
            img: ''
          }],
          imgs: [
            'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
          ],
          resources: '',
          about: '',
          friends: [{
              name: '九命馆',
              path: 'http://www.kingyin.club',
              desc: '我的网站',
              id: 0,
            }

          ],
          classmates: [{
              name: '九命馆',
              path: 'http://www.kingyin.club',
              desc: '',
              id: 0,
            },{
              name: '九命馆',
              path: 'http://www.kingyin.club',
              desc: '我的网站',
              id: 1,
            }],
          deletes: [],
        },
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        getPersonalInfo().then(res => {
          if (res.code === 20000) {
            this.focuses = res.data
            this.focuses.about = htmlDecode(this.focuses.about)
            this.focuses.resources = htmlDecode(this.focuses.resources)
          } else {
            this.$message({
              message: '加载异常',
              type: 'warning',
              duration: 5 * 1000
            })
          }
        }).catch(res => {
          this.$message({
            message: '加载失败',
            type: 'error',
            duration: 5 * 1000
          })
        })
      },
      changeImg(id, data) {
        this.focuses.focus[id].img = data
        this.$notify({
          title: '更新成功',
          message: '提交后生效',
          type: 'success'
        });
      },
      updateFocus() {
        const data = {
          key:'focus',value:JSON.stringify(this.focuses.focus)
        }
        updateConf(data).then(res => {
          if (res.code === 20000) {
            this.$message({
              message: '更新成功',
              type: 'success',
              duration: 5 * 1000
            })
          } else {
            this.$message({
              message: '更新失败',
              type: 'warning',
              duration: 5 * 1000
            })
          }
        }).catch(res => {
          this.$message({
            message: '更新异常',
            type: 'error',
            duration: 5 * 1000
          })
        })
      },
      onSubmit(msg) {
        // html 转义
        msg.value = htmlEncode(msg.value)
        // this.$notify({
        //   title: '提交成功',
        //   message: '马上好！',
        //   type: 'success'
        // });
        updateConf(msg).then(res => {
          if (res.code === 20000) {
            this.$message({
              message: '更新成功',
              type: 'success',
              duration: 5 * 1000
            })
          } else {
            this.$message({
              message: '更新失败',
              type: 'warning',
              duration: 5 * 1000
            })
          }
        }).catch(res => {
          this.$message({
            message: '更新异常',
            type: 'error',
            duration: 5 * 1000
          })
        })
      },
      onChange() {
        for (let index=0; index < this.focuses.friends.length; index++) {
          this.focuses.friends[index].id = index
        }
        for (let index=0; index < this.focuses.classmates.length; index++) {
          this.focuses.classmates[index].id = index + 21
        }
        const data = this.focuses.friends.concat(this.focuses.classmates)
        // 提交已发布和审核数据
        // 垃圾桶中的就不要了
        // this.$notify({
        //   title: '提交成功',
        //   message: '马上好！',
        //   type: 'success'
        // });
        updateConf({
          key:'friends',value:JSON.stringify(data)
        }).then(res => {
          if (res.code === 20000) {
            this.$message({
              message: '更新成功',
              type: 'success',
              duration: 5 * 1000
            })
          } else {
            this.$message({
              message: '更新失败',
              type: 'warning',
              duration: 5 * 1000
            })
          }
        }).catch(res => {
          this.$message({
            message: '更新异常',
            type: 'error',
            duration: 5 * 1000
          })
        })
      }
    }
  }
</script>

<style lang="scss">
.board {
  width: 1000px;
  margin-left: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-items: flex-start;
}

  .kanban {
    &.todo {
      .board-column-header {
        background: #2ac06d;
      }
    }

    &.working {
      .board-column-header {
        background: #f9944a;
      }
    }

    &.done {
      .board-column-header {
        // background: #2ac06d;
        background: red;
      }
    }
  }
</style>
